<template>
  <view class="tab">
    <!-- 横向滚动的Tab栏 -->
    <scroll-view class="tabScroll" scroll-x="true" show-scrollbar="false">
      <view class="tab-box">
        <!-- 循环渲染Tab选项 -->
        <view 
          class="tab-item" 
          v-for="(item, index) in list" 
          :key="index" 
          @click="onTabClick(index, item)"
        >
          <!-- 动态样式：当前选中项高亮 -->
          <view :style="current === index ? activeStyle : itemStyle">
            {{ item }}
          </view>
        </view>
      </view>
    </scroll-view>
    <!-- 右侧图标（可选） -->
    <view class="tab_setting">
      <uni-icons :type="rightIcon" size="24"></uni-icons>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // Tab列表数据
    list: {
      type: Array,
      default: () => []
    },
    // 当前选中的索引
    current: {
      type: Number,
      default: 0
    },
    // 右侧图标类型
    rightIcon: {
      type: String,
      default: "right"
    }
  },
  computed: {
    // 选中项样式
    activeStyle() {
      return {
        color: '#d00',
        fontSize: '35rpx',
        fontWeight: 'bold'
      }
    },
    // 未选中项样式
    itemStyle() {
      return {
        color: '#000',
        fontSize: '30rpx',
        fontWeight: 'normal'
      }
    }
  },
  methods: {
    // Tab点击事件：向父组件传递选中的索引和项
    onTabClick(index, item) {
      this.$emit('onTabClick', { index, item })
    }
  }
}
</script>

<style scoped>
.tab {
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  background-color: #fff;
}
.tabScroll {
  flex: 1;
  white-space: nowrap;
}
.tab-box {
  display: flex;
  gap: 30rpx;
}
.tab-item {
  padding: 10rpx 0;
}
.tab_setting {
  margin-left: 10rpx;
}
</style>